<template>
	<!-- https://www.cnblogs.com/goloving/p/14123155.html -->
  <view>
	  
	   <view class="content-box">
			<image class="avatar" :src="$wanlshop.oss(userinfo.avatar, 62, 62, 2, 'avatar')"></image>
				
			<view class="phone">{{userinfo.maskMobile || ''}}</view>
			
			<image src="/static/images/finger2.png" class="finger-image"></image>
			
			<view class="login-btn" @tap="fingerprint()" :class="disabled? 'disabled':''">点击登录</view>
			
			<view class="error" v-if="result">{{result || ''}}</view>
			
			<view class="tips">您在当前设备的指纹将用于该设备的马家窑App身份验证，我们仅接收指纹验证结果，并不收集您的指纹信息</view>
	   </view>
	  
	  
	  
	<!-- <button type="primary" @tap="fingerprint()" :disabled="disabled">按下开始识别指纹</button> -->
	
	<uniPopup 
		ref="uniPopup" 
	    :mask-close-able="false">
		<view class="warp">
			<view class="modal-body">
				<view class="modal-title">马家窑登录</view>
				<view class="modal-tips">请验证已有手机指纹</view>
				<view class="modal-tips">指纹识别</view>
				<image src="/static/images/finger.png" class="finger"></image>
				<view class="modal-cancel" @click.stop="closePopup">取消</view>
			</view>
		</view>
	</uniPopup>
	
  </view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup';
import md5 from '@/utils/md5.js'

export default {
	components: {
		uniPopup,
    },
   data() {
    return {
		userinfo:{},
        result: '',
		pageroute: '',
		disabled:true,
		login_sign:'',
    }
  },
  onLoad(option) {
	let that = this;
	this.pageroute = option.url;
	console.log("pageroute",  this.pageroute);
	
	this.userinfo = uni.getStorageSync("wanlshop:user-finger");
	this.login_sign = uni.getStorageSync("wanlshop:user-loginsign");
	console.log("userinfo",  this.userinfo);
	
	if(this.userinfo && this.userinfo.mobile){
		this.userinfo.maskMobile = this.maskedPhoneNumber(this.userinfo.mobile);
	}
	
	this.checkFingerDevice();
	
	if(!this.disabled){
		setTimeout(function(){
			that.fingerprint();
		}, 500)
	}
  },
  methods: {
	maskedPhoneNumber(phone) {
	    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
	},
	checkFingerDevice(){
		// #ifdef APP-PLUS
		if (!plus.fingerprint.isSupport()) {
			plus.nativeUI.toast('此设备不支持指纹识别');
			this.result = '此设备不支持指纹识别';
			this.disabled = true;
		}
		else if (!plus.fingerprint.isKeyguardSecure()) {
			plus.nativeUI.toast('此设备未设置密码锁屏，无法使用指纹识别');
			this.result = '此设备未设置密码锁屏，无法使用指纹识别';
			this.disabled = true;
		}
		else if (!plus.fingerprint.isEnrolledFingerprints()) {
			plus.nativeUI.toast('此设备未录入指纹，请到设置中开启');
			this.result = '此设备未录入指纹，请到设置中开启';
			this.disabled = true;
		}
		else {
			//此设备支持指纹识别
			this.result = '';
			this.disabled = false;
		}
		// #endif
		
		// #ifndef APP-PLUS || MP-WEIXIN
		plus.nativeUI.toast('此平台不支持指纹识别');
		this.result = '此平台不支持指纹识别';
		// #endif
	},  
	closePopup(){
		this.$refs.uniPopup.close();
	},
	fingerprint(){
		console.log("go fingerprint");
		
		let that = this;
		if(this.disabled){
			return false;
		}
		
		// #ifdef APP-PLUS
		// Android平台手动弹出等待提示框
		if ('Android' == plus.os.name) {
			this.$refs.uniPopup.open();
		}
		
		setTimeout(function(){
			plus.fingerprint.authenticate(function() {
				//指纹验证成功
				plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
				that.$refs.uniPopup.close();
				
				//调用接口登录
				that.login()
				
			}, function(e) {
				console.log("authenticate e", e);
				
				switch (e.code) {
					case e.AUTHENTICATE_MISMATCH:
						plus.nativeUI.toast('指纹匹配失败，请重新输入');
						break;
					case e.AUTHENTICATE_OVERLIMIT:
						plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
						plus.nativeUI.alert('指纹识别失败次数超出限制，请使用其它方式进行认证');
						break;
					case e.CANCEL:
						plus.nativeUI.toast('已取消识别');
						break;
					default:
						plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
						plus.nativeUI.alert('指纹识别失败，请重试');
						break;
				}
			});
		}, 500);
		// #endif
	},
	login(){
		let token = this.userinfo.mobile+'mjy';
		token = md5.hex_md5(token)

		uni.request({
			url: '/wanlshop/user/zwlogin', 
			method: 'POST',
			data: {
				mobile: this.userinfo.mobile,
				login_sign:this.login_sign,
				client_id: uni.getStorageSync("wanlshop:chat_client_id")?uni.getStorageSync("wanlshop:chat_client_id") : null
			},
			// 1.1.8升级
			success: res => {
				this.$store.dispatch('user/login', res.data);
				this.$store.dispatch('cart/login');
				this.$store.dispatch('chat/get');
			
				uni.reLaunch({url: decodeURIComponent(this.pageroute)});
			}
		});
	}
	
	
  }
}
</script>


<style lang="scss">
.warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.modal-body{
	width: 600rpx;
	height: 350rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;
}

.modal-title{
	font-size: 32rpx;
	font-weight: 700;
}

.modal-tips{
	font-size: 26rpx;
	margin-top: 10rpx;
	color: #969696;
}


.finger{
	width: 60rpx;
	height: 60rpx;
	margin-top: 50rpx;
}

.modal-cancel{
	font-size: 26rpx;
	margin-top: 10rpx;
}

.content-box{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 100rpx;
	flex-direction: column;
}

.avatar {
	height: 123rpx;
	width: 123rpx;
	border-radius: 50%;
}

.phone{
	margin-top: 30rpx;
	font-size: 34rpx;
}

.finger-image{
	margin-top: 100rpx;
	width: 100rpx;
	height: 100rpx;
}

.login-btn{
	margin-top: 30rpx;
	font-size: 30rpx;
	color: #6677ad;
}

.tips{
	position: fixed;
	bottom: 100rpx;
	color: #969696;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0rpx 120rpx;
	text-align: center;
}

.disabled{
	color: #969696 !important;
}

.error{
	color: red;
	margin-top: 50rpx;
	font-size: 30rpx;
}
</style>